import React, { useEffect, useState } from 'react';

/**
 * 账密登录
 * @param {*} props 
 * @returns 
 */
function AccountTone(props) {

    const { 
        doLogin, ckboxTab, setCkboxTab, toGo,
        loginTab, loginName, setLoginName, password, setPassword
    }  = props;
    
     // 获取验证状态
     const [ eyeTab, setEyeTab ] = useState(false);
    // 正在操作的 输入框
    const [ currentName, setCurrentName ] = useState('');
    // 登录按钮禁用状态
    const [ disableBtn, setDisableBtn ] = useState(true);
    
    useEffect(()=> {} ,[ currentName ]);
    useEffect(()=> {} ,[ loginTab, loginName ]);
    
    const handleName = (event, name) => {
        let value = event.target.value;
        if ('loginName' === name) {
            if(loginTab && value) {
                value = value.length > 10 ? value.substring(0, 11) : value;
            }
            setLoginName(value);
        }

        if ('password' === name) { setPassword(value); }
        
        if (loginName && password) {
            setDisableBtn(false);
        } else {
            setDisableBtn(true);
        }
    }

    const doClear = (name) => {
        if ('password' === name) { setPassword(''); }
        if ('loginName' === name) { setLoginName(''); }
        setDisableBtn(true);
    }

    return (
        <div className='w-login-form w-form-style'>
            <div className='w-login-user'>
                <div className='w-int-item'>
                    <input 
                        name='loginName' 
                        value={loginName}
                        onFocus={(e) => setCurrentName(e.target.name)}
                        onChange={(e)=> handleName(e, 'loginName')} autoComplete="off" placeholder='请输入手机号/邮箱/会员名称'/>
                    <span className='w-int-del w-form-style' style={{display: currentName === 'loginName' ? '' : 'none'}}
                        onClick={()=> doClear('loginName')}/>
                </div>
                <span className={`w-int-divide${loginName && loginName.length > 0 ? ' w-int-animate' : ''}`}/>
            </div>

            <div className='w-login-pwd' style={{ paddingTop: '.2rem'}}>
                <div className='w-int-item' style={{marginRight: '.1rem'}}>
                    <input 
                        name='password' 
                        value={password}
                        type={ eyeTab ? '' : 'password'}
                        onFocus={(e) => setCurrentName(e.target.name)}
                        onChange={(e)=> handleName(e, 'password')} autoComplete="off" placeholder='请输入登录密码'/>
                    <span className='w-int-del w-form-style' style={{ right: '.25rem', display: currentName === 'password' ? '' : 'none'}}
                        onClick={()=> doClear('password')} />
                    <span className={`w-int-eye${eyeTab ? ' w-show' : '' }`} 
                        onClick={()=> setEyeTab(!eyeTab)} style={{position: 'absolute'}}/>
                </div>
                <div className='w-int-forget' onClick={()=> toGo('/find-code')}>忘记密码？</div>
                <span className={`w-int-divide${password && password.length > 0 ? ' w-int-animate' : ''}`}/>
            </div>

            <div className='w-lsettlement'>
                <span className={`w-lsett-ckbox${ckboxTab ? ' w-active' :'' }`} onClick={()=> setCkboxTab(!ckboxTab)}/>
                <span children='我已阅读并同意'/>
                <span>
                    <a href='http://www.mikle.edu/mikle_server.html'>《眯客平台服务协议》</a>
                    <a href='http://www.mikle.edu/settle/mikle_secret.html'>《眯客平台隐私协议》</a>
                    <a href='http://www.mikle.edu/mikle_pay.html'>《眯付通用户支付协议》</a>
                </span>
            </div>

            <div className='w-login-btn w-center'>
                <button className={`w-btn w-mk-btn w-wd_10 w-ris-dot2${disableBtn ? ' w-disable' : ''}`}
                    onClick={()=> doLogin()} style={{ fontSize: '.16rem' }}>登录</button>
            </div>
        </div>
    )
}
export default AccountTone;